<template>
	<div class="home">
		<HeadComp @login="handleToLogin"></HeadComp>
		<div class="container">
			<el-carousel :interval="4000" type="card" height="70vh" :autoplay="false">
				<el-carousel-item v-for="(item) in showList" :key="item.id">
					<div class="medium">
						<img :src="item.imageUrl" class="img">
					</div>
				</el-carousel-item>
			</el-carousel>
		</div>
		<div class="music-box">
			<audio class="tool" src="../assets/music.mp3" controls></audio>
		</div>
		<div class="card-box">
			<div class="card-item" v-for="(item, index) in imgList" :key="index">
				<div class="text-box" v-if="item.type == 1">
					<h2 class="title">{{ item.title }}</h2>
					<div class="desc">
						<span>{{ item.desc }}</span>
						<span class="btn-link" @click.prevent="handleTo(item.url)">了解更多</span>
					</div>
				</div>
				<div class="img-box">
					<el-image style="width: 360px; height: 360px" :src="item.img" :preview-src-list="[item.img]">
					</el-image>
				</div>
				<div class="text-box" v-if="item.type == 2">
					<h2 class="title">{{ item.title }}</h2>
					<div class="desc">
						<span>{{ item.desc }}</span>
						<span class="btn-link" @click.prevent="handleTo(item.url)">了解更多</span>
					</div>
				</div>
			</div>
		</div>
		<div class="fotter">
			<Fotter :text="text"></Fotter>
		</div>
	</div>
</template>

<script>
import { getList } from '@/utils/request.js';
import { getToken, getUserInfo } from '@/utils/token';
import { mapState } from 'vuex';
import { imgList } from "@/utils/data.js";
export default {
	name: 'Index',
	components: {
		HeadComp: () => import(/* webpackChunkName: "HeadComp" */ '@/components/HeadComp.vue'),
		LoginForm: () => import(/** webpackChunkName: "LoginForm" */ '@/components/LoginForm.vue'),
		Fotter: () => import(/** webpackChunkName: "Fotter" */ '@/components/Fotter.vue'),
	},
	data() {
		return {
			list: [],
			loginDialogVisible: false,
			imgList: [],
			loginType: 1,
			text: {
				chinese: "无论有多少相似和不同，每个星系都以自己独特的方式耀眼着。",
				english: "No matter the similarities and differences,every galaxy's beautiful in own way."
			}
		}
	},
	created() {
		this.init();
		this.imgList = imgList;
	},
	mounted() {
		this.$store.state.userInfo = getUserInfo() || {};
	},
	methods: {
		toDetail(id) {
			if (getToken() && getUserInfo()) {
				this.$router.push({
					path: '/Detail',
					query: {
						id: id
					}
				})
			} else {
				this.handleToLogin();
			}
		},
		handleToLogin() {
			this.loginDialogVisible = true;
		},
		handleCancel() {
			this.loginDialogVisible = false;
		},
		init() {
			this.getList();
		},
		getList() {
			getList().then(res => {
				if (res.code == '200') {
					this.list = res.data
				}
			})
		},
		loginSuccess() {
			this.$store.state.userInfo = getUserInfo() || {};
		},
		handleTo(path) {
			this.$router.push({
				path
			})
		}
	},
	computed: {
		...mapState(["baseUrl"]),
		showList() {
			let arr = this.list;
			arr.forEach(item => {
				item.imageUrl = item.imageUrl.replace('http://localhost:8901', this.baseUrl);
			})
			return arr;
		},

	}
}
</script>
<style lang="scss" scoped>
$mainC: #000000;

.home {
	background-color: #c4c4c4;

	.container {
		width: 100%;
		padding: 3vh 1vw 0;
		box-sizing: border-box;
		padding-top: 10vh;
		box-sizing: border-box;
		height: 90vh;

		.medium {
			color: #475669;
			font-size: 14px;
			opacity: 0.75;
			line-height: 200px;
			margin: 0;
			width: 100%;
			height: 100%;
			position: relative;

			.img {
				width: 100%;
				height: 100%;
			}

			.btn {
				position: absolute;
				bottom: 20px;
				right: 20px;
				height: 30px;
				z-index: 2;
			}
		}

		.el-carousel__item {
			background-color: #99a9bf;
		}


	}

	.music-box {
		height: 260px;
		width: 60%;
		margin: 40px auto 60px;
		box-sizing: border-box;
		background-image: url("../assets/musicBack.jpg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		align-items: flex-end;
		justify-content: center;

		.tool {
			margin-bottom: 20px;
			width: 50%;
			height: 40px;
			opacity: 0.5;
		}
	}

	.card-box {
		width: 100%;
		color: #000000;
		padding: 30px 22vw 40px;
		box-sizing: border-box;

		.card-item {
			margin-bottom: 30px;
			display: flex;
			justify-content: space-between;
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;

			.text-box {
				padding: 1px;
				width: 358px;
				height: 330px;
				margin: 60px 0;
				text-align: left;
				border: 1px solid #ffffff;
				color: #ffffff;
				position: relative;

				.title {
					height: 40px;
					line-height: 40px;
					position: absolute;
					top: -20px;
					left: -2px;
					background-color: #c4c4c4;
				}

				.desc {
					padding: 20px 10px;
					box-sizing: border-box;
					font-size: 14px;
					line-height: 22px;

					.btn-link {
						color: blue;
						cursor: pointer;
					}
				}


			}

			.text-box::-webkit-scrollbar {
				display: none !important;
			}

			.img-box {
				padding: 40px 0;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-end;
			}

		}
	}


}

.flex-box-1 {
	display: flex;
	align-items: center;
	justify-content: center;
}
::v-deep .fotter-box {
	padding-left: 32vw !important;
}
</style>
